<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .w{
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid black;*/
        }
        #btn{
            width: 220px;
            height: 60px;
            background: #009966;
            border-radius: 10px;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
        }
        hr{
            margin-top: 10px;
        }

        li{
            list-style: none;
            padding: 10px;
        }

        section{

        }

        .post{
            background: #ffffff;
            border: 1px #cccccc solid;
            width: 500px;
            padding: 10px;
            margin: 20px auto;
            font-size: 14px;
            display: none;
            position: absolute;
        }
        .post #title{
            width: 450px;
            height:30px;
            line-height: 30px;
            display: block;
            border: 1px #cecece solid;
            margin-bottom: 10px;
        }
        .post select{
            width: 200px;
            height: 30px;
        }
        .post #content{
            width: 450px;
            height: 200px;
            display: block;
            margin: 10px 0;
            border: 1px #cecece solid;
        }
        .post .btn{
            width: 160px;
            height: 35px;
            color: #fff;
            background: #009966;
            border: none;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            line-height: 35px;
            border-radius: 8px;
            cursor: pointer;
        }


    </style>
</head>
<body>

<div id="box">

    <div class="w">

        <div id="btn" onclick="fabu()">
            我要发贴
        </div>
        <hr />


        <div class="post" id="post1">
            <input id="title" placeholder="请输入标题（1-50个字符）">
            所属版块：
            <select>
                <option>请选择版块</option>
                <option>论文</option>
            </select>
            <textarea id="content"></textarea>
            <input type="button" class="btn" value="发布" onclick="post()">
        </div>


        <section>
            <ul>
                <li id="text"></li>
            </ul>
        </section>

    </div>


</div>
</body>

<script>
    function fabu() {
        document.getElementById('post1').style.display = 'block'
    }


    function post() {
        document.getElementById('post1').style.display = 'none'

        var h1 = document.createElement('h1')
        var ul = document.getElementsByTagName('ul')[0]
        var li = document.getElementById('text')
        var span = document.createElement("span");

        ul.appendChild(h1)
        h1.innerHTML = document.getElementById("title").value;

        ul.appendChild(li)
        li.innerHTML = document.getElementById('content').value
        console.log(li)

        ul.appendChild(span)
        span.innerHTML = new Date().toLocaleString()
    }
</script>

</html>